<template>
  <Nav>
    <div class="container">
      <div class="chers">
        <input class="input" v-model="searchvalue" type="text" />
        <el-button
          class="button"
          @click="search"
          style="margin-left: 25px"
          type="primary"
          icon="el-icon-search"
          >搜索</el-button
        >
      </div>
      <el-tabs class="tabs" v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="僧侣信息" name="first">
          <Category />
          <el-table
            :style="appbg"
            :header-cell-style="{
              background: 'rgba(0,0,0,0.70)',
              color: '#999ba4',
            }"
            class="table"
            :data="
              listmonk.slice(
                (currentPage - 1) * pageSize,
                currentPage * pageSize
              )
            "
            :row-style="tableRowClassName"
          >
            <el-table-column
              align="center"
              prop="img"
              label="照片"
              min-width="30%"
            >
              <!-- 图片的显示 -->
              <template slot-scope="scope">
                <img class="img" :src="scope.row.image" />
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="name"
              label="姓名"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="gender"
              label="性别"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="nation"
              label="名族"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="temple"
              label="所属寺庙"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="post"
              label="寺内职务"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="address"
              label="住址"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="number"
              label="身份证号码"
            ></el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="primary"
                  @click="xiansuohandleClick(scope.$index, scope.row)"
                  >详情</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页器 -->
          <div class="block" style="margin-top: 0.098039rem">
            <el-pagination
              align="center"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[8]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="listmonk.length"
            ></el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane label="政保重点人员" name="second">
          <Category />
          <el-table
            :style="appbg"
            :header-cell-style="{
              background: 'rgba(0,0,0,0.70)',
              color: '#999ba4',
            }"
            class="table"
            :data="
              listmonk.slice(
                (currentPage - 1) * pageSize,
                currentPage * pageSize
              )
            "
            :row-style="tableRowClassName"
          >
            <el-table-column
              align="center"
              prop="img"
              min-width="30%"
              label="照片"
            >
              <!-- 图片的显示 -->
              <template slot-scope="scope">
                <img class="img" :src="scope.row.image" />
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="name"
              label="姓名"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="gender"
              label="性别"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="nation"
              label="名族"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="temple"
              label="所属寺庙"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="post"
              label="寺内职务"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="address"
              label="住址"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="number"
              label="身份证号码"
            ></el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="primary"
                  @click="xiansuohandleClick(scope.$index, scope.row)"
                  >详情</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页器 -->
          <div class="block" style="margin-top: 0.098039rem">
            <el-pagination
              align="center"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[8]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="involved.length"
            ></el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane label="刑嫌重点人员" name="third">
          <Category />
          <el-table
            :style="appbg"
            :header-cell-style="{
              background: 'rgba(0,0,0,0.70)',
              color: '#999ba4',
            }"
            class="table"
            :data="
              gunInvolved.slice(
                (currentPage - 1) * pageSize,
                currentPage * pageSize
              )
            "
            :row-style="tableRowClassName"
          >
            <el-table-column
              prop="name"
              label="案件名称"
              align="center"
              width="180"
            ></el-table-column>
            <el-table-column
              prop="class"
              align="center"
              label="案件类型"
              width="180"
            ></el-table-column>
            <el-table-column
              prop="caseTime"
              label="案件发生时间"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="casePlace"
              align="center"
              label="案件发生地点"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="responsible"
              label="案件负责人"
            ></el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="primary"
                  @click="xiansuohandleClick(scope.$index, scope.row)"
                  >详情</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页器 -->
          <div class="block" style="margin-top: 0.098039rem">
            <el-pagination
              align="center"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[8]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="gunInvolved.length"
            ></el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane label="治安重点人员" name="fourth">
          <Category />
          <el-table
            :style="appbg"
            :header-cell-style="{
              background: 'rgba(0,0,0,0.70)',
              color: '#999ba4',
            }"
            class="table"
            :data="
              personnel.slice(
                (currentPage - 1) * pageSize,
                currentPage * pageSize
              )
            "
            :row-style="tableRowClassName"
          >
            <el-table-column
              prop="image"
              align="center"
              label="头像"
              min-width="30%"
            >
              <!-- 图片的显示 -->
              <template slot-scope="scope">
                <img class="img" :src="scope.row.image" />
              </template>
            </el-table-column>
            <el-table-column
              prop="name"
              label="姓名"
              align="center"
              width="180"
            ></el-table-column>
            <el-table-column
              prop="caseName"
              label="案件名称"
              align="center"
              width="180"
            ></el-table-column>
            <el-table-column
              prop="class"
              align="center"
              label="案件类型"
            ></el-table-column>
            <el-table-column
              prop="caseTime"
              align="center"
              label="案件发生时间"
            ></el-table-column>
            <el-table-column
              prop="casePlace"
              align="center"
              label="案件发生地点"
            ></el-table-column>
            <el-table-column
              prop="numberId"
              label="身份证"
              align="center"
            ></el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="primary"
                  @click="xiansuohandleClick(scope.$index, scope.row)"
                  >详情</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页器 -->
          <div class="block" style="margin-top: 0.098039rem">
            <el-pagination
              align="center"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[8]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="personnel.length"
            ></el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane label="出境回流人员" name="fifth">
          <Category />
          <el-table
            :style="appbg"
            :header-cell-style="{
              background: 'rgba(0,0,0,0.70)',
              color: '#999ba4',
            }"
            class="table"
            :data="
              personnel.slice(
                (currentPage - 1) * pageSize,
                currentPage * pageSize
              )
            "
            :row-style="tableRowClassName"
          >
            <el-table-column
              prop="image"
              label="头像"
              align="center"
              min-width="30%"
            >
              <!-- 图片的显示 -->
              <template slot-scope="scope">
                <img class="img" :src="scope.row.image" />
              </template>
            </el-table-column>
            <el-table-column
              prop="name"
              label="姓名"
              align="center"
              width="180"
            ></el-table-column>
            <el-table-column
              prop="caseName"
              label="案件名称"
              align="center"
              width="180"
            ></el-table-column>
            <el-table-column
              prop="class"
              align="center"
              label="案件类型"
            ></el-table-column>
            <el-table-column
              prop="caseTime"
              align="center"
              label="案件发生时间"
            ></el-table-column>
            <el-table-column
              prop="casePlace"
              align="center"
              label="案件发生地点"
            ></el-table-column>
            <el-table-column
              prop="numberId"
              label="身份证"
              align="center"
            ></el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="primary"
                  @click="xiansuohandleClick(scope.$index, scope.row)"
                  >详情</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页器 -->
          <div class="block" style="margin-top: 0.098039rem">
            <el-pagination
              align="center"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[8]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="personnel.length"
            ></el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane label="重点关注人员" name="sixth">
          <Category />
          <el-table
            :style="appbg"
            :header-cell-style="{
              background: 'rgba(0,0,0,0.70)',
              color: '#999ba4',
            }"
            class="table"
            :data="
              personnel.slice(
                (currentPage - 1) * pageSize,
                currentPage * pageSize
              )
            "
            :row-style="tableRowClassName"
          >
            <el-table-column
              prop="image"
              align="center"
              label="头像"
              min-width="30%"
            >
              <!-- 图片的显示 -->
              <template slot-scope="scope">
                <img class="img" :src="scope.row.image" />
              </template>
            </el-table-column>
            <el-table-column
              prop="name"
              label="姓名"
              align="center"
              width="180"
            ></el-table-column>
            <el-table-column
              prop="caseName"
              label="案件名称"
              align="center"
              width="180"
            ></el-table-column>
            <el-table-column
              prop="class"
              align="center"
              label="案件类型"
            ></el-table-column>
            <el-table-column
              prop="caseTime"
              label="案件发生时间"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="casePlace"
              align="center"
              label="案件发生地点"
            ></el-table-column>
            <el-table-column
              prop="numberId"
              label="身份证"
              align="center"
            ></el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="primary"
                  @click="xiansuohandleClick(scope.$index, scope.row)"
                  >详情</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页器 -->
          <div class="block" style="margin-top: 0.098039rem">
            <el-pagination
              align="center"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[8]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="personnel.length"
            ></el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane label="社会人员" name="seventh">
          <Category />
          <el-table
            :style="appbg"
            :header-cell-style="{
              background: 'rgba(0,0,0,0.70)',
              color: '#999ba4',
            }"
            class="table"
            :data="
              personnel.slice(
                (currentPage - 1) * pageSize,
                currentPage * pageSize
              )
            "
            :row-style="tableRowClassName"
          >
            <el-table-column
              prop="image"
              label="头像"
              align="center"
              min-width="30%"
            >
              <!-- 图片的显示 -->
              <template slot-scope="scope">
                <img class="img" :src="scope.row.image" />
              </template>
            </el-table-column>
            <el-table-column
              prop="name"
              label="姓名"
              align="center"
              width="180"
            ></el-table-column>
            <el-table-column
              prop="caseName"
              align="center"
              label="案件名称"
              width="180"
            ></el-table-column>
            <el-table-column
              prop="class"
              align="center"
              label="案件类型"
            ></el-table-column>
            <el-table-column
              prop="caseTime"
              label="案件发生时间"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="casePlace"
              align="center"
              label="案件发生地点"
            ></el-table-column>
            <el-table-column
              prop="numberId"
              label="身份证"
              align="center"
            ></el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="primary"
                  @click="xiansuohandleClick(scope.$index, scope.row)"
                  >详情</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页器 -->
          <div class="block" style="margin-top: 0.098039rem">
            <el-pagination
              align="center"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[8]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="personnel.length"
            ></el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane label="非法传教人员" name="eighth">
          <Category />
          <el-table
            :style="appbg"
            :header-cell-style="{
              background: 'rgba(0,0,0,0.70)',
              color: '#999ba4',
            }"
            class="table"
            :data="
              personnel.slice(
                (currentPage - 1) * pageSize,
                currentPage * pageSize
              )
            "
            :row-style="tableRowClassName"
          >
            <el-table-column
              prop="image"
              label="头像"
              align="center"
              min-width="30%"
            >
              <!-- 图片的显示 -->
              <template slot-scope="scope">
                <img class="img" :src="scope.row.image" />
              </template>
            </el-table-column>
            <el-table-column
              prop="name"
              label="姓名"
              align="center"
              width="180"
            ></el-table-column>
            <el-table-column
              prop="caseName"
              label="案件名称"
              width="180"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="class"
              align="center"
              label="案件类型"
            ></el-table-column>
            <el-table-column
              prop="caseTime"
              label="案件发生时间"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="casePlace"
              label="案件发生地点"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="numberId"
              label="身份证"
              align="center"
            ></el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="primary"
                  @click="xiansuohandleClick(scope.$index, scope.row)"
                  >详情</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页器 -->
          <div class="block" style="margin-top: 0.098039rem">
            <el-pagination
              align="center"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[8]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="personnel.length"
            ></el-pagination>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </Nav>
</template>

<script>
import bg from "@/images/bg.png";
import Nav from "@/components/Nav/index";
import Category from "@/components/Category/index";
// import image from "@/images/bg.png";
import {
  listClue,
  listInvolved,
  listGunInvolved,
  listPersonnel,
} from "@/api/data";

export default {
  data() {
    return {
      searchvalue: "",
      appbg: `background:url('${bg}') no-repeat`,
      currentPage: 1, // 当前页码
      total: 20, // 总条数
      pageSize: 8, // 每页的数据条数
      activeName: "first", //tab的页码
      params: {
        page: 1,
        perPage: 20,
      },
      listmonk: [
        {
          address: "",
          createTime: "",
          gender: "",
          id: "123456",
          img: "",
          name: "",
          nation: "",
          number: "",
          post: "",
          remarks: "",
          stationName: "",
          temple: "",
        },
      ],
      listpersonnel: [
        {
          caseName: "",
          casePlace: "",
          caseTime: "",
          class: "",
          createTime: "",
          id: "",
          img: "",
          name: "",
          numberId: "",
          remarks: "",
          stationName: "",
        },
      ],
      clue: [],
      involved: [],
      gunInvolved: [],
      personnel: [],
    };
  },
  methods: {
    //线索核查点击详情
    xiansuohandleClick(index) {
      console.log(index);
      this.$router.push({
        name: "peopledetails",
        query: {
          id: this.listmonk[index].id,
        },
      });
    },

    tableRowClassName() {
      // 注意，这里返回的是一个对象
      let rowBackground = {};
      rowBackground.background = "rgba(0,0,0,0)";
      return rowBackground;
    },

    handleClick(tab, event) {
      console.log(tab, event);
      // 获取当前页码
      // console.log(this.activeName);
      // console.log(tab.name);
    },
    // 每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.currentPage = 1;
      this.pageSize = val;
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
    async getListClue() {
      const data = await listClue(this.params);
      const { list } = data;
      this.clue = list || [];
    },
    async getlistInvolved() {
      const data = await listInvolved(this.params);
      console.log("async data", data);
      const { list } = data;
      this.involved = list || [];
    },
    async getlistGunInvolved() {
      const data = await listGunInvolved(this.params);
      const { list } = data;
      this.gunInvolved = list || [];
    },
    async getlistPersonnel() {
      const data = await listPersonnel(this.params);
      const { list } = data;
      this.personnel = list || [];
    },
    search() {
      if (this.activeName == "first") {
        this.params.clueName = this.searchvalue;
        const data = this.getListClue(this.params);
        console.log("data", data);
      } else if (this.activeName == "second") {
        this.params.name = this.searchvalue;
        const data = this.getlistInvolved(this.params);
        console.log("data", data);
      } else if (this.activeName == "third") {
        this.params.name = this.searchvalue;
        const data = this.getlistGunInvolved(this.params);
        console.log("data", data);
      } else if (this.activeName == "fourth") {
        this.params.name = this.searchvalue;
        const data = this.getlistPersonnel(this.params);
        console.log("data", data);
      }
    },
  },
  mounted() {
    this.getListClue();
    this.getlistInvolved();
    this.getlistGunInvolved();
    this.getlistPersonnel();
  },
  components: {
    Nav,
    Category,
  },
};
</script>

<style scoped>
.tabs {
  width: 8.916667rem /* 1712/192 */;
  color: #999ba4;
}

.table {
  font-size: 0.072917rem /* 14/192 */;
  width: 8.59375rem /* 1650/192 */;
  color: #999ba4;
  margin: 0.104167rem /* 20/192 */ auto 0;
}

.img {
  border-radius: 50%;
  width: 0.182292rem /* 35/192 */;
  height: 0.182292rem /* 35/192 */;
}

.chers {
  padding-top: 0.15625rem /* 30/192 */;
}

.input {
  width: 2.609375rem /* 501/192 */;
  height: 0.234375rem /* 45/192 */;
}
</style>